<template>
  <a-modal
    :title="`${model ? '编辑' : '新增'}洗衣`"
    :width="640"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout">
        <a-form-item v-show="false" label="主键ID">
          <a-input v-decorator="['id']" disabled />
        </a-form-item>
        <a-form-item label="名称">
          <a-input v-decorator="['name']" placeholder="请填写名称" />
        </a-form-item>
        <a-form-item label="图片" class="form-header">
          <d-upload v-decorator="['img_url', { initialValue: '' }]"> </d-upload>
        </a-form-item>
        <a-form-item label="请选择类型">
          <a-select v-decorator="['clothes_kinds_id']" placeholder="请选择类型">
            <a-select-option :value="item.id" v-for="item in clothesKinds" :key="item.id">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="描述内容">
          <a-textarea v-decorator="['content']" placeholder="请填写描述内容" :auto-size="{ minRows: 3, maxRows: 5 }" />
        </a-form-item>
        <a-form-item label="权重">
          <a-input  v-decorator="['weight']" placeholder="数字越大排序越靠前" />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { getClothesKinds, clothesAdd, clothesEdit } from '@/api/clothes'
import formModalMixin from '@/mixins/formModalMixin'
// 表单字段
const fields = ['name', 'id', 'clothes_kinds_id', 'img_url', 'content','weight']
export default {
  mixins: [formModalMixin],
  data () {
    this.fields = fields
    this.addAction = clothesAdd
    this.editAction = clothesEdit
    return {
      clothesKinds: []
    }
  },
  created () {
    getClothesKinds().then(res => {
      this.clothesKinds = res.data
    })
  }
}
</script>
